<template>
  <div class="app-container">
    <el-form label-width="120px" :model="relation" :rules="rules" ref="relation">
      <!--返回上一步-->
      <div class="back-bar-box mb-30">
        <div class="btn-back" @click="$router.go(-1)"><i class="el-icon-back"></i> 返回</div>
        <div class="line"></div>
        <div class="name">{{$route.name}}</div>
      </div>
      <!--编辑表单-->
      <el-form-item v-if="!$route.params.id" label="课程" prop="name">
        <el-button @click="showRelationCourse()" type="primary">请关联课程</el-button>
      </el-form-item>

      <el-form-item label="课程名" prop="name">
        <el-input v-model="relation.name" style="width: 400px"/>
      </el-form-item>

      <el-form-item label="封面">
        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="BASE_URL+'/eduoss/fileoss?host=path'"
          class="avatar-uploader">
          <img v-if="relation.cover" :src="relation.cover" style="width: 200px">
          <el-button type="primary" v-else>上传<i class="el-icon-upload el-icon--right"></i></el-button>
          <label class="form-tip"><i class="el-icon-warning"></i> 长宽比4:3，建议尺寸：400x300像素</label>

        </el-upload>

      </el-form-item>

      <el-form-item label="原价" prop="originalPrice">
        <el-input v-model="relation.charge" style="width: 400px"/>
        <label class="form-tip"><i class="el-icon-warning"></i> 最小单位：元。该价格仅作为参考，无实际意义。</label>
      </el-form-item>


      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="relation.sort" :min="0"/>
        <label class="form-tip"><i class="el-icon-warning"></i> 请输入整数。小数排在前，大数排在后</label>
      </el-form-item>

      <el-form-item>
        <el-button @click="update('relation')" type="primary">保存</el-button>
        <el-button @click="$router.go(-1)">取消</el-button>
      </el-form-item>

    </el-form>

    <!--关联课程弹出框-->
    <el-dialog v-if="!$route.params.id" title="选择关联课程" :visible.sync="dialogFormVisible" width="1000px">

      <div class="dialog-body">
        <el-tabs @tab-click="handleTabClick">
          <el-tab-pane v-for="(item,index) in classify"
                       :key="index"
                       :label="item.name">
            <el-table ref="singleTable"
                      :data="tableData[index]"
                      highlight-current-row
                      @current-change="handleCurrentChange">
              <el-table-column>
                <template slot-scope="scope">
                  <el-radio v-model="currentRow" :label="scope.row">&nbsp;</el-radio>
                </template>
              </el-table-column>

              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column
                property="id"
                label="课程id"
                width="220">
              </el-table-column>
              <el-table-column
                label="课程"
                width="420">
                <template slot-scope="scope">
                  <div class="d-flex">
                    <div><img :src="scope.row.cover || scope.row.coverImage" style="width: 80px;height: 60px"></div>
                    <div class="ml-4">{{scope.row.title}}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                property="price"
                label="价格">
              </el-table-column>
            </el-table>

          </el-tab-pane>

        </el-tabs>
      </div>
      <div class="dialog-footer">

        <el-button @click="selectCourse()" type="primary">保存</el-button>
        <el-button @click="dialogFormVisible=false">取消</el-button>
      </div>

    </el-dialog>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        classify: [
          { typeKey: 1, name: '录播课'},
          { typeKey: 3, name: '图文课 '},
        ],
        relation: {
          name:'',
          cover:'',
          charge:0,
          sort:1,
          step:'',
          targetType:1, //默认1 录播课
          targetId:''
        },
        rules: {
          name: [
            {required: true, message: '请输入标题', trigger: 'blur'},
            {min: 2, max: 255, message: '长度在 2 到 255 个字符', trigger: 'blur'}
          ]
        },
        BASE_URL: process.env.BASE_URL,//获取dev.env.js中的BASE_API
        dialogFormVisible: false,
        tableData: [],

        currentRow: null
      }
    },
    created() {
      let id = this.$route.params.id
      if (id) {
        this.getData(id)
      } else {
        this.getCourseList()
      }
    }
    ,
    methods: {
      getData(id) {
        this.api({
          url: `/step-relation/getRelation/${id}`,
          method: 'get',
        }).then(data => {
          this.relation = data
        })
      },
      getCourseList() {
        this.api({
          url: `/step-relation/getCourse`,
          method: 'get'
        }).then(data => {
          this.tableData[0] = data.vod
          this.tableData[1] = data.articles

        })
      },
      update(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.api({
              url: "/step-relation/saveOrUpdateRelation",
              method: "post",
              data: this.relation
            }).then(() => {
              this.$router.go(-1)
              return this.$message({
                type: 'success',
                message: '编辑成功!'
              });
            })
          } else {
            return false;
          }
        });

      },
      handleTabClick(tab, event) {
        //赋值课程类型
        this.relation.targetType = this.classify[tab.index].typeKey

      },
      handleAvatarSuccess(res, file) {
        this.data.cover = res.info
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2
        const typeArr = ['image/jpeg', 'image/png', 'image/jpg']
        const isImage = typeArr.find(x => x === file.type);
        if (!isImage) {
          this.$message.error('不支持上传此文件类型!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return isImage && isLt2M
      },
      //关联课程弹出层
      showRelationCourse() {
        this.dialogFormVisible = true
      },
      //处理单选表格列
      handleCurrentChange(val) {
        this.currentRow = val;
        console.log(11111)
      },
      //选择课程
      selectCourse() {
        this.relation.name = this.currentRow.title
        this.relation.cover = this.currentRow.cover || this.currentRow.coverImage
        this.relation.charge = this.currentRow.price
        this.relation.targetId =this.currentRow.id
        this.relation.sort = 1
        this.relation.stepId = this.$route.query.sid
        this.dialogFormVisible = false
        console.log(this.relation)

      }
    }
  }
</script>

<style scoped>
  .dialog-body {
    width: 100%;
    height: 500px;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
  }

  .dialog-footer {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 20px 30px;
    border-top: 1px solid rgba(183, 176, 176, .6);
  }


</style>
